<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Vue 的Component-3组件</title>
	</head>

	<body>
		<div id="app">
			<h3>Component-3 父子组件的关系</h3>
			<hr />
			<hong></hong>
			<p>现有父组件，再有子组件，还可采用src进行外部调用</p>
			<strong>注意浏览器的加载顺序，从上到下，若需加载的东西在最下面会报错，加载不出来</strong>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			//声明子组件
			//			var childComponent = {
			//				template: '<h4 style="color: green;">我是子组件</h4>'
			//			};
			var vm = new Vue({
				el: '#app',
				data: {
					message: 'Hello, Vue.js!!'
				},
				components: { //components 	可以定义多个组件
					"hong": { // 字符串
						template: `<div>
							<h3 style="color:red"> 我是局部component的组件 </h3>
							<child></child>
							</div>`,
						components: {
							//'child': childComponent
							'child': {
								template: '<h4 style="color: green;">我是子组件</h4>'
							}
						}
					}

				}
			})
		</script>
	</body>

</html>